<template>
  <div class="point-container">
    <van-nav-bar
      left-text="个人积分"
      left-arrow
      color="#fff"
      @click-left="this.$router.replace('/my')"
    />
    <div class="point-panel">
      <p>现有积分</p>
      <p>{{ sum }}</p>

      <div class="point-rule" @click="showPointRule">积分规则</div>
    </div>

    <!-- 标签内容 -->
    <div class="point-list">
      <van-tabs v-model:active="active">
        <van-tab title="收入">
          <div class="card" v-for="item in getlist" :key="item.id">
            <div class="left">
              <span>{{ item.remark }}</span>
              <span class="time">{{ item.createtime }}</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="支出">
          <div class="card" v-for="item in postlist" :key="item.id">
            <div class="left">
              <span>{{ item.remark }}</span>
              <span class="time">{{ item.createtime }}</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { showDialog } from 'vant'
import { getPointlist } from '../../api/user.js'
export default {
  data() {
    return {
      // 显示积分规则
      showRule: false,
      // 收入、支出
      active: 0,
      // 积分列表数据（status=0表示收入，1表示支出）
      getlist: [],
      postlist: [],
      sum: JSON.parse(window.sessionStorage.getItem('userInfo')).point
    }
  },
  created() {
    this.getPointlist()
  },
  methods: {
    showPointRule() {
      this.showRule = true
      showDialog({
        title: '积分规则',
        message: '为公益捐赠物资即可获得积分，可以在积分商城中换取商品。'
      }).then(() => {
        this.showRule = false
      })
    },
    async getPointlist() {
      const { data: res1 } = await getPointlist(1)
      this.getlist = res1.data
      const { data: res2 } = await getPointlist(0)
      this.postlist = res2.data
    }
  }
}
</script>

<style lang="less" scoped>
.point-container {
  height: 100vh;

  .van-nav-bar {
    color: #fff;
    background-color: #333;

    :deep(.van-icon) {
      color: #fff;
    }

    :deep(.van-nav-bar__text) {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }
  p {
    margin: 0;
  }
  .point-panel {
    position: relative;
    width: 100%;
    height: 130px;
    background-color: #fe7207;
    margin: 0;
    overflow: hidden;

    p {
      margin: 20px 0 0 20px;
      font-family: serif;
      font-size: 20px;
      color: #fff;
    }

    .point-rule {
      position: absolute;
      top: 20px;
      right: 0;
      width: 60px;
      height: 28px;
      line-height: 28px;
      background-color: #fd8929;
      font-size: 13px;
      font-family: serif;
      text-align: center;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      color: #fff;
    }
  }

  .point-list {
    width: 100%;

    .card {
      display: flex;
      justify-content: space-between;
      width: 90%;
      height: 80px;
      padding: 15px;
      margin: 15px auto;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;

      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;

        .time {
          font-size: 13px;
          color: #666;
        }
      }

      .right {
        .price {
          font-size: 15px;
        }
      }
    }
  }
}
</style>
